<template>
  <div class="bg-white">
    <div class="container">
      <div class="blueshop-settle">
        <p class="title">入驻绿色商户</p>
        <el-form ref="form" :model="form" class="blueshop-settle-form" label-width="150px">
            <el-form-item label="企业全称">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="授权联系人">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="联系人手机号">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件">
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="收货地址：" prop="" class="address-content">
                <v-distpicker :province="temp.addressprovince" :city="temp.addresscity" :area="temp.addressarea" @selected="onSelected"></v-distpicker>
            </el-form-item>
            <el-form-item label="营业执照">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item class="mgt-80">
                <el-button type="primary" class="blueshop-settle-btn">立即入驻</el-button>
              </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
</template>


<script>
import VDistpicker from "v-distpicker";
import axios from 'axios'
export default {
  name:'Blueshop_settle',
  data(){
      return{
        form:{
          mobile:''
        },
        dialogImageUrl: '',
        dialogVisible: false,
        temp: {
          addressprovince: '',
          addresscity: '',
          addressdist: '',
        }
      }
  },
  methods:{
    // 省市区传值
    onSelected(data) {
      debugger;
      this.temp.addressprovince = data.province.value
      this.temp.addresscity = data.city.value
      this.temp.addressarea = data.area.value
      this.formInline.addressprovince = data.province.value
      this.formInline.addresscity = data.city.value
      this.formInline.addressarea = data.area.value
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
  },
  created:function () {
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  },
}
</script>

<style>
 @import '../../../static/style/blueshop_settle';
</style>
